<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">求购大厅</view>
		</view>
		<view class="search_maxbox" :class="scrrol == true ? 'scrrolHeader02' : ''">
			<view class="search_box">
				<view class="search">
					<view class="icon iconfont icon-sousuo"></view>
					<input type="text" v-model="keyword" value="" placeholder="搜索品牌车型" />
					<view class="menu" @click="pageinit">搜索</view>
				</view>
			</view>
		</view>
		<view class="clear_box"></view>
		<view class="clear_box02"></view>

		<!-- <view class="nav">
			<view class="menu">
				<view class="text">车型</view>
				<view class="icon iconfont icon-xiala"></view>
			</view>
			<view class="menu">
				<view class="text">年款</view>
				<view class="icon iconfont icon-xiala"></view>
			</view>
			<view class="menu">
				<view class="text">筛选</view>
				<view class="icon iconfont icon-shaixuan-xuanzhong"></view>
			</view>
		</view> -->

		

		<!-- <view class="rule_box">
			<view class="icon iconfont icon-tongzhi2"></view>
			<view class="value">最近帮“A澳业批车-阿伟”自动同步2757条朋友圈车源</view>
		</view> -->

		<!-- <scroll-view class="scroll_box" scroll-y="true" @scrolltolower="lower"> -->
			<block v-for="(item,index) in list">
				<view class="circle_list">
					<view class="circle_box">
						<view class="circle_img">
							<image :src="item.headimg" mode="scaleToFill"></image>
						</view>
						<view class="circle_text">
							<view class="name">{{item.nickname}}</view>
							<!-- <view class="text">近一个月同步朋友圈车源<span>14</span>条</view> -->
						</view>
						<view class="orientation">{{item.city}}</view>
					</view>
					<view class="circle_value">
						<!-- <view class="type">置顶</view> -->
						<view class="value">{{item.content}}</view>
					</view>
					<view class="circle_type">
						<view class="type" v-if="item.brand_name">{{item.brand_name}}</view>
						<view class="type" v-if="item.price_range">{{item.price_range}}</view>
						<view class="type" v-if="item.car_age">{{item.car_age}}</view>
						<view class="type" v-if="item.color">{{item.color}}</view>
						<view class="type" v-if="item.car_mile">{{item.car_mile}}</view>
					</view>
					<view class="circle_type" v-if="item.other">
						<view class="type">{{item.other}}</view>
					</view>
					<view class="circle_picture" v-if="item.images">
						<view class="picture" :data-img="item.images" @click="previewImage">
							<image :src="item.images" mode="scaleToFill"></image>
						</view>
					</view>
					<view class="circle_other">
						<view class="time">{{item.time}}</view>
						<view class="icon_box">
							<view class="icon" @click="to_call(item.phone,item.id)">
								<view class="i iconfont icon-dianhua"></view>
								<view class="t">电话</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		<!-- </scroll-view> -->
		<block v-if="empty">
			<view style="height: 10vh;margin-top: 10vw;width: 100%;text-align: center;" >
				<u-empty text="没有更多了" mode="list">没有更多了</u-empty>
			</view>
		</block>
		
		<view class="publish_box" :data-url="'/pages/service/publish02'" @click="gotopage">
			<view class="icon iconfont icon-wodeqiugou"></view>
			<view class="text">发布</view>
		</view>
		<view class="pupu_box" @tap="closePupu" v-if="pupu">
			<view class="pupu_show" @tap.stop="">
				<view class="pupu_title">联系电话</view>
				<view class="close iconfont icon-guanbi1" @tap="closePupu"></view>
				<view class="pupu_value">
					<view class="ewm">
						{{phone}}
					</view>
					<view class="pupu_menu" @tap="closePupu">确定</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				scrrol: false,
				info: '',
				pupu : false,
				want_id : 0,
				empty_text : '暂无求购信息',
				load_type : 'more',
				empty : 0,
				list : [],
				phone:'',
				is_vip:0,
				call_num:0,
				user_call:0,
				keyword:'',
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			setRule(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			loadData() {
				let that = this;
				if(that.load_type == 'loading' || that.load_type == 'no_more'){
					return;
				}
				that.load_type = 'loading';
				that.Net._get('auth/index/buy_list', {keyword:that.keyword,page:that.page}, res => {
					if(res.code == 1){
						that.list = res.data.list;
						that.load_type = 'more';
						that.is_vip = res.data.is_vip;
						that.user_call = res.data.user_call;
						that.call_num = res.data.call_num;
						if (that.list.length == 0){
							that.empty = 1;
						}
					}else if(res.code == -1){
						that.load_type = 'no_more';
						that.empty_text = '此功能需要开通会员';
					}else{
						that.load_type = 'no_more';
					}
				});
			},
			pageinit(){
				this.page = 1;
				this.list = [];
				this.load_type = 'more';
				this.empty = 0;
				this.loadData();
			},
			to_call(phone,id){
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.navigateTo({
						url: '/pages/public/login'
					});
					return '';
				}
				if (this.is_vip == 0 && this.user_call >= this.call_num){
					uni.showModal({
					    title: '此功能仅限会员使用，开通vip可无限次数联系',
					    content: '',
						confirmText:'去开通',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/personalcenter/member/member'
								});
								return '';
					        } else if (res.cancel) {
								
					        }
					    }
					})
					return '';
				}
				this.want_id = id;
				this.phone = phone;
				uni.showModal({
				    title: '联系车商',
				    content: phone,
					confirmText:'拨打',
				    success: function (res) {
				        if (res.confirm) {
							uni.makePhoneCall({
								phoneNumber: phone //仅为示例
							});
							this.Net._post('auth/index/call_want', {id:this.id}, res => {
								
							});
				        } else if (res.cancel) {
							
				        }
				    }
				})
			},
			closePupu(){
				let that = this;
				that.pupu = !that.pupu;
			},
			previewImage(e) {
				let that = this;
				let img_ = e.currentTarget.dataset.img;
				uni.previewImage({
					urls: [img_],
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let token = uni.getStorageSync('_TOKEN_')
				if (!token) {
					uni.showModal({
					    title: '温馨提示',
					    content: '您还未登录，请先登录',
						cancelText:'暂不登录',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
								uni.navigateTo({
									url: '/pages/public/login'
								});
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					            // 用户点击了取消按钮的相关逻辑可以放在这里
					        }
					    }
					})
					return '';
				}
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
			var that = this;
			that.page++;
			that.Net._get('auth/index/buy_list', {per_page:'10',page:that.page,keyword:that.keyword}, res => {
			  if (res.code == 1) {
			    //console.log(res)
			    if (res.data.list == '') {
			      uni.showToast({
			        title: '没有更多了',
			        duration: 2000,
			        icon: 'none'
			      });
				  that.empty = 1;
			    } else {
			      that.list = that.list.concat(res.data.list); //将数据拼接在一起
			    }
			  } else if (res.code == 0) {
			    that.Msg.Success(res.msg, res => {});
			  }
			});
		},
	}
</script>

<style>
	page{
		padding-bottom: 0 !important;
	}
	.header {
		/* background-color: transparent !important; */
	}

	.header .text {
		/* background-color: transparent !important; */
		color: #fff !important;
	}

	.scrrolHeader02 {
		background-color: #fff !important;
	}

	.clear_box02 {
		width: 100%;
		height: calc(12vw + var(--status-bar-height));
	}

	.search_maxbox {
		width: 100%;
		padding: 3vw 4%;
		position: fixed;
		left: 0;
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}

	.search_box {
		width: 100%;
		border-radius: 2vw;
		border: 1px solid #FC5D20;
		display: flex;
		align-items: center;
		height: 12vw;
		padding-left: 2vw;
	}

	.search_box .city_box {
		display: flex;
		align-items: center;
		padding: 0 2vw;
		border-right: 1px solid #E8E8F0;
		margin-right: 2vw;
	}

	.search_box .city_box .city {
		font-size: 3.8vw;
		color: #979AA9;
		margin-right: 1vw;
	}

	.search_box .city_box .arrow {
		font-size: 3vw;
		color: #979AA9;
	}

	.search_box .search {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.search_box .search .icon {
		font-size: 4vw;
		color: #979AA9;
		margin-right: 2vw;
	}

	.search_box .search input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
	}

	.search_box .search .menu {
		font-size: 4vw;
		height: 9vw;
		width: 16vw;
		color: #fff;
		background-color: #FE811E;
		border-radius: 2vw;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 1.5vw;
	}

	.rule_box {
		width: 100%;
		height: 10vw;
		background-color: #FEF6EB;
		display: flex;
		align-items: center;
		padding: 0 4%;
	}

	.rule_box .icon {
		font-size: 5vw;
		color: #FF6B23;
		margin-right: 2vw;
	}

	.rule_box .value {
		flex: 1;
		font-size: 3.5vw;
		color: #FF6B23;
		margin-right: 2vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.rule_box .add {
		font-size: 3.5vw;
		color: #FF6B23;
		margin-right: 1vw;
	}

	.rule_box .arrow {
		font-size: 4vw;
		color: #FF6B23;
	}

	.nav {
		width: 92%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 5vw 0;
	}

	.nav .menu {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav .menu .text {
		font-size: 3.5vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
	}

	.nav .menu .icon {
		font-size: 3vw;
		color: #E6E6E6;
	}

	.tips_box {
		width: 92%;
		margin: 0 auto;
		background-color: #333;
		border-radius: 3vw;
		padding: 1.5vw;
		position: relative;
	}

	.tips_box .tips_bg {
		width: 10vw;
		position: absolute;
		right: 4%;
		top: 1.5vw;
	}

	.tips_box .tips_bg image {
		width: 100%;
	}

	.tips_box .title {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tips_box .title .i {
		font-size: 4vw;
		color: #fff;
		margin-right: 1vw;
	}

	.tips_box .title .t {
		font-size: 3.5vw;
		color: #fff;
	}

	.tips_box .text_box {
		width: 100%;
		margin-top: 1.5vw;
		background-color: #fff;
		border-radius: 3vw;
		display: flex;
		align-items: center;
		padding: 4vw;
	}

	.tips_box .text_box .tips {
		font-size: 3.5vw;
		color: #333;
		flex: 1;
	}

	.tips_box .text_box .menu {
		font-size: 3.5vw;
		color: #fff;
		width: 20vw;
		height: 7vw;
		border-radius: 7vw;
		background: linear-gradient(to right, #FE9229, #FF4F27);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.scroll_box{
		width: 100%;
		height: 86vh;
	}

	.circle_list {
		width: 100%;
		background-color: #fff;
		padding: 4%;
		border-bottom: 1px solid #F7F8FC;
	}

	.circle_list .circle_box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.circle_list .circle_box .circle_img {
		width: 12vw;
		height: 12vw;
		margin-right: 2vw;
	}

	.circle_list .circle_box .circle_img image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}

	.circle_list .circle_box .circle_text {
		flex: 1;
	}

	.circle_list .circle_box .circle_text .name {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
	}

	.circle_list .circle_box .circle_text .text {
		font-size: 3.5vw;
		color: #999999;
		margin-top: 1vw;
	}

	.circle_list .circle_box .circle_text .text span {
		color: #FF6A23;
	}

	.circle_list .circle_box .orientation {
		font-size: 3.6vw;
		color: #999999;
	}

	.circle_list .circle_value {
		margin-top: 2vw;
		display: flex;
	}

	.circle_list .circle_value .type {
		width: 10vw;
		height: 5vw;
		font-size: 3vw;
		color: #fff;
		background-color: #FF5227;
		margin-right: 1vw;
		border-radius: 1vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle_list .circle_value .value {
		font-size: 3.7vw;
		color: #333;
		font-weight: bold;
	}
	
	.circle_list .circle_type{
		margin-top: 3vw;
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 3vw;
	}
	
	.circle_list .circle_type .type{
		height: 5vw;
		background-color: #f5f5f5;
		border-radius: 1vw;
		color: #333;
		font-size: 3vw;
		padding: 0 2vw;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 2vw;
	}
	
	.circle_list .circle_type .type:nth-child(1){
		margin-left: 0;
	}

	.circle_list .circle_picture {
		width: 100%;
		margin-top: 2vw;
		display: flex;

	}

	.circle_list .circle_picture .picture {
		flex: 1;
		height: 30vw;
		margin-left: 1vw;
	}

	.circle_list .circle_picture .picture:nth-child(1) {
		margin-left: 0;
	}

	.circle_list .circle_picture .picture image {
		width: 45%;
		height: 100%;
		border-radius: 2vw;
	}

	.circle_list .circle_other {
		width: 100%;
		margin-top: 3vw;
		display: flex;
		align-items: center;
	}

	.circle_list .circle_other .time {
		font-size: 3.8vw;
		color: #999;
	}

	.circle_list .circle_other .icon_box {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end
	}

	.circle_list .circle_other .icon_box .icon {
		width: 16vw;
		display: flex;
		align-items: center;
	}

	.circle_list .circle_other .icon_box .icon .i {
		font-size: 4vw;
		color: #333;
		margin-right: 1vw;
	}

	.circle_list .circle_other .icon_box .icon .t {
		font-size: 3.6vw;
		color: #333;
		font-weight: bold;
	}
	
	.publish_box{
		width: 24vw;
		height: 11vw;
		border-radius: 11vw;
		padding: 0 1.5vw;
		background: linear-gradient(to right, #FE9229, #FF4F27);
		display: flex;
		align-items: center;
		position: fixed;
		right: calc(50% - 12vw);
		bottom: 10vh;
		z-index: 999;
	}
	
	.publish_box .icon{
		width: 8vw;
		height: 8vw;
		border-radius: 50%;
		background-color: #fff;
		font-size: 4vw;
		color: #FE9129;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.publish_box .text{
		flex: 1;
		font-size: 3.5vw;
		color: #fff;
		font-weight: bold;
		text-align: center;
	}
	
	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	
	.pupu_box .pupu_show {
		width: 100%;
		background-color: #fff;
		border-radius: 4vw 4vw 0 0;
		padding: 5vw 4vw;
		position: relative;
	}
	
	.pupu_box .pupu_show .pupu_title{
		font-size: 4.5vw;
		color: #333;
		text-align: center;
		font-weight: bold;
		padding-bottom: 5vw;
	}
	
	.pupu_box .pupu_show .close{
		font-size: 4vw;
		color: #333;
		text-align: center;
		position: absolute;
		right: 5vw;
		top: 5vw;
	}
	
	.pupu_box .pupu_show .pupu_value{
		max-height: 70vh;
		width: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
		
	}
	
	.pupu_box .pupu_show .pupu_value .ewm{
		width: 30vw;
		height: 30vw;
		margin: 0 auto;
	}
	
	.pupu_box .pupu_show .pupu_value .ewm image{
		width: 100%;
		height: 100%;
	}
	
	.pupu_menu{
		width: 100%;
		height: 13vw;
		border-radius: 13vw;
		line-height: 13vw;
		text-align: center;
		background-color: #FC5D20;
		color: #fff;
		font-size: 4vw;
		margin: 0 auto;
		margin-top: 8vw;
		font-weight: bold;
	}
</style>